<!DOCTYPE html>
<html>

	<head>
		<meta name="keywords" content="camicroscope, quip" />
	    <meta charset='utf-8'>
	    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
	    <meta name='viewport' content='width=device-width, initial-scale=1'>

	    <title>Collapsible List Unit Test Page</title>

	    <!-- camessage component dependencies -->
		<!-- google material icons css sheet -->
		<link href='/iconfont/material-icons.css' rel='stylesheet'/>
		<!-- css sheet -->
		<link rel='stylesheet' type='text/css' media='all' href='/css/style.css'/>

		<link rel='stylesheet' type='text/css' media='all' href='/components/collapsiblelist/collapsiblelist.css'/>
		<!-- util.js -->
		<script src = '/common/util.js' type='text/javascript'></script>
		<!-- message display js -->
		<script src='/components/collapsiblelist/collapsiblelist.js'></script>

	</head>
	<body>
		<!-- this is a flag element that indicates the resources has been loaded -->
		<input id='isLoad' type='checkbox' style='display:none;'>

		<!-- constructor -->

		<div id = 'list'></div>

	</body>

	<!-- test script for each case -->
	<script type = "text/javascript">
		// proposal:
		// test:
		// constructor:options:id,title,icon,isExpand,
		// setList : refeash UI
		// triggerContent(itemId, action = 'close')
		// addContent(itemId, elt)
		// clearContent(itemId)
		// callback

		// changecallback function
		function change(d){
			window.listStatus = d;
		}


		// initialize UI component
		// options to initialize component
		const input = document.createElement('input');
		input.type = 'text';
		input.value = 'text input'

		// options one
		const opt = {
			id:'list',
			list:[
				{
					id:'item1',
					title:'Annotation',
					icon:'border_color',
					content: `<input type='checkbox' checked><label>1111</label>`, //$UI.annotOptPanel.elt
					isExpand:true

				},{
					id:'item2',
					icon:'find_replace',
					title:'Analytics',
					content:input //$UI.algOptPanel.elt,
				}
			],
			changeCallBack:change
		}

		window.list = new CollapsibleList(opt);

		document.getElementById('isLoad').checked = true;

	</script>
</html>
